<template>
  <div ref="echart" class="echart"></div>
</template>

<script>
import geoJson2 from './yongjiaxian.json'
export default {
  data() {
    return {
      echart: null
    }
  },
  mounted() {
    this.initDta()
  },
  methods: {
    initDta() {
      this.echart = this.$echarts.init(this.$refs.echart)
      this.$echarts.registerMap('永嘉县', geoJson2)
      // 每个地区的设备数量值
      var data = [{
        name: '北城',
        value: 0
      }];
// 设定series是一个空的数组
      var series = [];
      [
        ['永嘉县', data]
      ].forEach(function(item, i) {
        series.push(
            {
              type: 'map',
              map: '永嘉县',
              zlevel: 0,
              itemStyle: {
                normal: {
                  areaColor: '#323c48',
                  borderColor: '#111'
                },
                emphasis: {
                  areaColor: '#2a333d'
                }
              },
              label: {
                normal: {
                  show: true,
                  textStyle: {
                    color: '#ddb926',
                    fontSize: 10
                  },
                },
                emphasis: {
                  textStyle: {
                    color: '#ddb926',
                    fontSize: 10
                  },
                }

              },
              data: data
            });
      });
      const option = {
        backgroundColor: '#4f5555',
        visualMap: {
          show:false,
          min: 0,
          max: 1,
          left: 'left',
          top: 'bottom',
          text: ['高', '低'], // 文本，默认为数值文本
          calculable: true,
          inRange:{
            color: ['#FF2600','#7AC29A']
          },
          textStyle: {
            color: '#ffffff'
          }
        },
        geo: {
          map: '永嘉县',
          label: {
            textStyle: {
              fontSize: '.1rem',
            }
          },
          itemStyle: {
            normal: {
              areaColor: '#fff',
              borderColor: '#587A9F'
            },
            emphasis: {
              areaColor: '#ccc'
            }
          }
        },
        series: series
      };

      this.echart.setOption(option)
    }
  }
}
</script>

<style scoped lang="less">
.echart {
  width: 100%;
  height: 100%;
}
</style>
